

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/ext.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3564966_a6tt4yhnzge.css" media="all">
    <style>
        /* .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        } */
        .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
        .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
            line-height: 20px !important;
            vertical-align: middle;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
</head>
<body>
<div class="">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- <form class="layui-form" action="">
                <div class="layui-form-item">

                    <div class="layui-inline">

                        <div class="layui-input-inline">
                            <input type="text" name="txt_key" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>关键字查询</button>
                </div>
            </form> -->

            <form class="layui-form" lay-filter="form_search" id="form_search" action="">
                <div class="layui-form-item">


                    <div class="layui-inline">
                        <!--<label class="layui-form-label auto-size-label"></label>-->
                        <div class="layui-input-inline">
                            <input type="text" name="txt_key" placeholder="请输入关键字" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>查询</button>
                        <!--<button type="button" class="layui-btn layui-btn-normal layui-btn-sm action-export layui-hide" lay-submit="" lay-filter="btn_search"><i class="fa fa-file-excel-o"></i> 导出</button>-->
                    </div>

                    <div class="layui-inline fr">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal action-edit layui-hide" lay-submit="add" lay-filter="add"><i class="layui-icon layui-icon-release"></i>新增固件</button>
                    </div>

                </div>
            </form>

            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>
</div>





<script type="text/html" id="table_action_bar">
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-hide action-edit" lay-event="default">设为默认</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs layui-hide action-edit" lay-event="remark">备注</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-hide action-delete" lay-event="del">删除</a>
</script>

<script src="../plugins/layui/layui.js"></script>
<script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
<script src="../plugins/toastr/toastr.min.js"></script>
<script>
    var lay_index=null;
    var table=null;
    var form=null;
    var iconPicker =null;
    var Table=null;
    var sys_roles=null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var dictionary=JSON.parse(window.localStorage.getItem("dictionary"));
    var func_url="${.func_url}";
    var actions=[];
    var device_define=[];
    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form'], function(){
        $ = layui.$;
        form = layui.form;
        table = layui.table;

        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-center",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "2000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        $.ajax({
            type: 'GET',
            url: '../Api/DeviceDefine',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (res) {
                console.info(res)
                if(res.code>=0){
                    device_define = res.data;
                    renderSelect();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载设备类型失败');
            }
        });

        //监听提交
        form.on('submit(btn_search)', function(data){
            //layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})
            search({name:data.field.txt_key});
            return false;
        });
        form.on('submit(add)', function(data){
            layer.open({
                type: 2
                ,title: '上传'
                ,content: '/Admin/FirmwareUpload'
                ,maxmin: false
                ,shade: 0.5
                ,shadeClose: true
                ,area: ['550px', '550px']
                ,offset: '100px'
                ,btn: ['关闭']
                
                ,yes: function(index, layero){
                    //点击确认触发 iframe 内容中的按钮提交
                    var submit = layero.find('iframe').contents().find("#btn_ok");
                    submit.click();
                }
            });
            return false;
        });

        form.on('submit(btn_save)', function(data){
            console.info(data.field);
            var request_type = "PUT";
            if(data.field.id!=""){
                request_type = "PUT";
            }
            else {
                request_type = "POST";
            }
            layer.load(1);
            $.ajax({
                type: request_type,
                url:'../Api/Firmware',
                data: data.field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        layer.close(lay_index);
                        toastr.success("保存成功");
                        layui.table.reload('table'); //重载表格
                    }else{
                        layer.close(lay_index);
                        layer.alert(res.msg);
                        toastr.warning(res.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        });

        Table = table.render({
            elem: '#table'
            //,data:data
            ,url:'../Api/Firmware'
            ,height: 'full-80'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: {}
            ,page: false
            ,limit:30
            //,toolbar: '#user_table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: ''
            ,even:true
            ,size: 'sm' //小尺寸的表格
            //,skin: 'nob' //无框风格
            ,cols: [[
                {field:'id', title:'id',hide:true}
                ,{field:'name', title:'固件',sort: true, width:250}
                ,{field:'type', title:'类型',align:'center', width:150, sort: true,templet: function(d){
                        var html = "";
                        for(var i=0;i<device_define.length;i++){
                            if(d.type == device_define[i].device_type){
                                html = device_define[i].device_desc;
                                break;
                            }
                        }
                        return html;
                    }}
                ,{field:'file_size', title:'文件大小',sort: true, width:120}
                ,{field:'default', title:'默认', width:100, sort: true,templet: function(d){
                        var html="";
                        if(d.default==0){
                            return html;
                        }
                        else if(d.default==1){
                            html="默认";
                        }
                        return "<span class=\"layui-badge layui-bg-black\">"+html+"</span>";
                    }}
                ,{field:'remark', title:'说明',sort: false}
                

                ,{field:'upload_time', title:'上传时间', width:200,align:'center', sort: true}
                ,{field:'upload_by', title:'上传者', width:100,align:'center', sort: false}
                ,{title:'操作', toolbar:'#table_action_bar'}
            ]]
            ,done: function(res, curr, count){
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            }
        });

        table.on('sort(table)', function(obj){
            for(var i=0;i<actions.length;i++){
                $('.action-'+actions[i].action_id).removeClass("layui-hide");
            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2
                        ,title: '上传'
                        ,content: '/Admin/FirmwareUpload'
                        ,maxmin: true
                        ,area: ['550px', '550px']
                        ,offset: '100px'
                        ,btn: ['关闭']
                        ,yes: function(index, layero){
                            //点击确认触发 iframe 内容中的按钮提交
                            var submit = layero.find('iframe').contents().find("#btn_ok");
                            submit.click();
                        }
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var data = obj.data;
            
            //console.log(data)
            if(obj.event === 'del'){
                layer.confirm('确认删除'+data.name+"?", function(index){
                    //obj.del();
                    layer.close(index);
                    $.ajax({
                        type: 'Delete',
                        url: '../Api/Firmware',
                        data: data,
                        beforeSend: function(request) {
                            request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                        },
                        dataType: "json",
                        success: function (data) {
                            //console.info(data)
                            if(data.code>=0){
                                //layer.msg('成功');
                                layui.table.reload('table'); //重载表格
                                layer.close(index); //再执行关闭
                            }else{
                                layer.alert('失败:'+data.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert('失败');
                        }
                    });
                });
            }
            else if(obj.event === 'default'){
                $.ajax({
                    type: 'Put',
                    url: '../Api/Firmware/Default',
                    data: data,
                    beforeSend: function(request) {
                        request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                    },
                    dataType: "json",
                    success: function (data) {
                        //console.info(data)
                        if(data.code>=0){
                            //layer.msg('成功');
                            layui.table.reload('table'); //重载表格
                        }else{
                            layer.alert('失败:'+data.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert('失败');
                    }
                });
            }
            else if(obj.event === 'remark'){
                onRemark(data);
            }
        });

    });

    function search(params) {
        Table.reload({
            where: params
        });
    }

    function onRemark(item) {
        console.log(item);
        
        //item.remark替换<br>为\n
        if(item.remark){
            item.remark=item.remark.replace(/<br>/g,"\n");
        }
        
        console.log(item);
        form.val("form",item);
        layer.open({
            //area: 'auto',
            area:['60%','400px'],
            type: 1,
            shade: 0.3,
            offset: '20%',
            shadeClose:true,
            title: '修改', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定', '取消']
            ,yes: function(index, layero){
                
                lay_index=index;
                var submit = $("#btn_save");
                console.log(submit);
                submit.click();
            }
        });
    }

    function renderSelect(){
        //栏舍下拉
        var html="<option value='' ></option>";
        for(var i=0;i<device_define.length;i++){
            var selectd="";
            html+="<option "+selectd+" value=\""+device_define[i].device_type+"\">"+device_define[i].device_desc+"</option>";

        }

        $("select[name='device_type']").html(html);
        form.render('select');
    }


</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>

<form class="layui-form" lay-filter="form" id="form" style="display:none;padding: 20px;">
    <div class="layui-form-item layui-hide">
        <input type="text" name="id" lay-verify="" placeholder="" autocomplete="off" class="layui-input" style="width: 100%">
        <input type="button" lay-submit lay-filter="btn_save" id="btn_save" value="确认">
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="layui-text-red">*</span> 备注说明</label>
        <div class="layui-input-block">
            <textarea type="text" name="remark" lay-verify="required" lay-verType="tips" placeholder="" autocomplete="off" class="layui-input" style="width: 100%;height: 220px;">
        </div>
    </div>

    
</form>

</html>

